<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>M3U8 Video Detector - 图标模板</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.6;
    }
    
    .icon-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin: 30px 0;
    }
    
    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #ddd;
      padding: 15px;
      border-radius: 8px;
    }
    
    .icon-svg {
      background-color: #4285f4;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }
    
    h1 {
      color: #4285f4;
    }
    
    h2 {
      margin-top: 30px;
      color: #333;
    }
    
    pre {
      background-color: #f5f5f5;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
    }
    
    code {
      font-family: monospace;
    }
    
    .note {
      background-color: #fff8e1;
      padding: 15px;
      border-left: 4px solid #ffc107;
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <h1>M3U8 Video Detector - 图标模板</h1>
  
  <p>这个文件提供了M3U8 Video Detector扩展程序的图标SVG代码。您可以使用这些SVG代码来创建所需的PNG图标文件。</p>
  
  <div class="note">
    <strong>注意：</strong> 扩展程序需要以下尺寸的图标文件：
    <ul>
      <li>icon16.png (16x16像素)</li>
      <li>icon32.png (32x32像素)</li>
      <li>icon48.png (48x48像素)</li>
      <li>icon128.png (128x128像素)</li>
    </ul>
    所有图标文件应放在<code>icons</code>目录中。
  </div>
  
  <h2>图标预览</h2>
  
  <div class="icon-container">
    <div class="icon-item">
      <div class="icon-svg" style="width: 16px; height: 16px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#ffffff">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
        </svg>
      </div>
      <span>16x16</span>
    </div>
    
    <div class="icon-item">
      <div class="icon-svg" style="width: 32px; height: 32px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="#ffffff">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
        </svg>
      </div>
      <span>32x32</span>
    </div>
    
    <div class="icon-item">
      <div class="icon-svg" style="width: 48px; height: 48px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
        </svg>
      </div>
      <span>48x48</span>
    </div>
    
    <div class="icon-item">
      <div class="icon-svg" style="width: 128px; height: 128px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="#ffffff">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
        </svg>
      </div>
      <span>128x128</span>
    </div>
  </div>
  
  <h2>SVG图标代码</h2>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"&gt;
  &lt;path d="M0 0h24v24H0z" fill="none"/&gt;
  &lt;path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/&gt;
&lt;/svg&gt;</code></pre>
  
  <h2>如何创建PNG图标</h2>
  
  <p>您可以使用以下方法之一来创建PNG图标：</p>
  
  <h3>方法1：使用在线SVG到PNG转换工具</h3>
  <ol>
    <li>复制上面的SVG代码</li>
    <li>访问在线SVG到PNG转换工具，如 <a href="https://svgtopng.com/" target="_blank">svgtopng.com</a> 或 <a href="https://convertio.co/svg-png/" target="_blank">convertio.co</a></li>
    <li>粘贴SVG代码并设置所需的尺寸（16x16、32x32、48x48、128x128）</li>
    <li>转换并下载PNG文件</li>
    <li>将文件重命名为icon16.png、icon32.png、icon48.png和icon128.png</li>
    <li>将这些文件放在icons目录中</li>
  </ol>
  
  <h3>方法2：使用图像编辑软件</h3>
  <ol>
    <li>复制上面的SVG代码并将其保存为icon.svg文件</li>
    <li>使用支持SVG的图像编辑软件（如Adobe Illustrator、Inkscape或GIMP）打开SVG文件</li>
    <li>导出为所需尺寸的PNG文件</li>
    <li>将文件重命名为icon16.png、icon32.png、icon48.png和icon128.png</li>
    <li>将这些文件放在icons目录中</li>
  </ol>
  
  <h3>方法3：使用代码生成</h3>
  <p>如果您熟悉HTML5 Canvas或Node.js图像处理库，您可以编写代码来将SVG转换为不同尺寸的PNG文件。</p>
  
  <div class="note">
    <strong>提示：</strong> 确保图标在蓝色背景（#4285f4）上看起来清晰可见。您可以根据需要调整SVG的颜色和设计。
  </div>
</body>
</html>